<script setup>

import {onMounted, reactive, ref} from "vue";
import {pageList, removeEntity} from "./api/EntityApi.js";
import {PaginationDTO} from "../../model/PaginationDTO.js";
import Create from "./Create.vue";
import Update from "./Update.vue";
import {deleteConfirmation, getEnumLabel} from "../../components/EntityOperate.js";
import {tableColumns, tableCriteria} from './model/EntityConfig.js';
import ReqParam from "./ReqParam.vue";
import ApiAppRel from "./ApiAppRel.vue";
import Test from "./Test.vue";
import {
  Connection,
  Search,
  Refresh,
  Plus,
  Setting,
  DocumentCopy,
  Link,
  VideoPlay,
  Edit,
  Delete
} from '@element-plus/icons-vue';

const paginationDTO = new PaginationDTO({});

let tableData = ref([]);
// 查询参数
let pageNum = ref(1)
let pageSize = ref(10)
let totalNum = ref(0)
let criteria = reactive({});

paginationDTO.condition = criteria;

// 弹窗控制
let dialogFormCreateVisible = ref(false)
let dialogFormUpdateVisible = ref(false)
let dialogFormReqParamVisible = ref(false)
let dialogFormRelVisible = ref(false)
let dialogFormTestVisible = ref(false)

// 修改数据
let form = reactive({})

const handleCurrentChange = (val) => {
  pageNum.value = val
  search();
}

const handleSizeChange = (val) => {
  pageSize.value = val
  search();
}

//新增数据 设置新的空的绑值对象 打开弹窗
const handleAdd = () => {
  dialogFormCreateVisible.value = true
}

//编辑数据 先赋值到表单再弹窗
const handleTest = (row) => {
  Object.assign(form, row)
  dialogFormTestVisible.value = true
}

//编辑数据 先赋值到表单再弹窗
const handleEdit = (row) => {
  Object.assign(form, row)
  dialogFormUpdateVisible.value = true
}

//设置请求参数
const handleReqParams = (row) => {
  Object.assign(form, row)
  dialogFormReqParamVisible.value = true
}

//API的访问日志页面
const handleLog = (row) => {
  window.open('/#/reqLog/pageList?apiName=' + row.name, '_blank');
}

//编辑数据 先赋值到表单再弹窗
const handleRel = (row) => {
  Object.assign(form, row)
  dialogFormRelVisible.value = true
}

//删除数据 从index位置开始，删除一行即可
const remove = (id) => {
  removeEntity(id).then(() => {
    search();
  })
}

//查询数据
const search = () => {
  paginationDTO.pageSize = pageSize.value;
  paginationDTO.pageNum = pageNum.value;
  pageList(paginationDTO).then((data) => {
    if (data) {
      tableData.value = data.data
      pageSize.value = data.pageSize
      pageNum.value = data.pageNum
      totalNum.value = data.total
    }
  });
}

const clear = () => {
  tableCriteria.forEach(item => {
    criteria[item.key] = null
  })
}

onMounted(() => {
  search();
})

</script>

<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-title">
        <el-icon class="title-icon"><Connection /></el-icon>
        <h2>API管理</h2>
      </div>
      <p class="page-description">管理和配置系统API接口</p>
    </div>

    <el-card class="search-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>搜索筛选</span>
        </div>
      </template>
      <div class="search-container">
        <div class="search-form">
          <div class="search-item" v-for="(item, index) in tableCriteria" :key="index">
            <label class="search-label">{{ item.placeholder }}</label>
            <el-input
                v-if="item.type === 'string'"
                class="search-input"
                :placeholder="item.placeholder"
                v-model="criteria[item.key]"
                clearable
            />
            <el-select
                v-else-if="item.type === 'enum'"
                v-model="criteria[item.key]"
                class="search-select"
                :placeholder="item.placeholder"
                clearable
            >
              <el-option
                  v-for="option in item.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
              />
            </el-select>
            <el-date-picker
                v-else-if="item.type.includes('date')"
                v-model="criteria[item.key]"
                :type="item.type"
                class="search-date"
                :placeholder="item.placeholder"
            />
          </div>
        </div>
        <div class="search-actions">
          <el-button type="primary" @click="search" :icon="Search">查询</el-button>
          <el-button @click="clear" :icon="Refresh">重置</el-button>
        </div>
      </div>
    </el-card>

    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="table-header">
          <span class="table-title">API列表</span>
          <el-button type="primary" @click="handleAdd" :icon="Plus">新增API</el-button>
        </div>
      </template>


      <div class="table-content">
        <el-table :data="tableData" class="data-table" stripe>
          <el-table-column
              v-for="column in tableColumns"
              :key="column.key"
              :prop="column.key"
              :label="column.label"
              show-overflow-tooltip
          >
            <template v-slot:default="scope">
              <span v-if="column.type === 'enum'">
                {{ getEnumLabel(column.options, scope.row[column.key]) }}
              </span>
              <span v-else>
                {{ scope.row[column.key] }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="320" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button link type="primary" size="small" @click="handleReqParams(scope.row)" :icon="Setting">
                  参数设置
                </el-button>
                <el-button link type="info" size="small" @click="handleLog(scope.row)" :icon="DocumentCopy">
                  日志
                </el-button>
                <el-button link type="success" size="small" @click="handleRel(scope.row)" :icon="Link">
                  关联
                </el-button>
                <el-button link type="warning" size="small" @click="handleTest(scope.row)" :icon="VideoPlay">
                  测试
                </el-button>
                <el-button link type="primary" size="small" @click="handleEdit(scope.row)" :icon="Edit">
                  编辑
                </el-button>
                <el-button link type="danger" size="small" @click.prevent="deleteConfirmation(scope.row.id,remove)" :icon="Delete">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination-container">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalNum"
              background
          />
        </div>
      </div>
    </el-card>
    <Create v-model:dialogVisible="dialogFormCreateVisible" @refresh="search"></Create>
    <Update v-model:dialogVisible="dialogFormUpdateVisible" v-model:form="form" @refresh="search"></Update>
    <ReqParam v-model:dialogVisible="dialogFormReqParamVisible" v-model:form="form" @refresh="search"></ReqParam>
    <ApiAppRel v-model:dialogVisible="dialogFormRelVisible" v-model:form="form" @refresh="search"></ApiAppRel>
    <Test v-model:dialogVisible="dialogFormTestVisible" v-model:form="form" @refresh="search"></Test>
  </div>
</template>

<style scoped>
.page-container {
  padding: 0;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.title-icon {
  font-size: 24px;
  color: #667eea;
  margin-right: 12px;
}

.page-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
}

.page-description {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
}

.search-card {
  margin-bottom: 24px;
}

.card-header {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.search-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.search-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-label {
  font-size: 14px;
  font-weight: 500;
  color: #495057;
}

.search-input,
.search-select,
.search-date {
  width: 100%;
}

.search-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #f1f3f4;
}

.table-card {
  margin-bottom: 0;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
}

.table-content {
  padding: 0;
}

.data-table {
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.action-buttons .el-button {
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
  border-top: 1px solid #f1f3f4;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-form {
    grid-template-columns: 1fr;
  }
  
  .search-actions {
    justify-content: center;
  }
  
  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 2px;
  }
  
  .pagination-container {
    justify-content: center;
  }
}
</style>